<template>
	<div class="bar-container" v-on:click="getDetail">
		<div class="baritem purpose">
			<p>{{ purpose }}</p>
		</div>
		<div class="baritem amount">
			<p>{{ amount }}</p>
		</div>
		<div class="baritem owner">
			<p>{{ owner }}</p>
		</div>
		<div class="baritem clearState">
			<p>{{ stateDescription }}</p>
		</div>
	</div>
</template>

<script>

import {bus} from '../main.js'

export default {
	name: 'minibar', 
	data(){
		return {
			purpose: '',
			amount: '',
			owner: '',
			clearState: false,
		}
	},
	methods: {
		getDetail: function(){
			bus.$emit('show_detail_modal', this.accountid)
		}
	},
	computed: {
		stateDescription: function(){
			if(this.clearState){
				return '已清账'
			}else{
				return '未清账'
			}
		}
	},
	mounted: function(){
		let account = window.delegate.getAccount(this.accountid)
		this.purpose = account.purpose
		this.amount = account.amount
		this.owner = account.owner
		this.clearState = account.cleared
	},
	props: ['accountid']

}
</script>

<style scoped>
.bar-container{
	width: 100%;
	border-radius: 5px;
	margin-top: 5px;
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.8);
	color: white;
	height: 50px;
	overflow: hidden;
}

.baritem{
	text-align: center;
	display: inline-block;
	height: 50px;
	float: left;
	line-height: 0.5;
}

.purpose{
	width: 40%;
}

.amount{
	width: 15%;
}

.owner{
	width: 30%;
}

.clearState{
	width: 15%;
}



</style>